<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <meta charset="UTF-8">
    <div data-th-replace="layout/head-top"></div>
    <link rel="stylesheet" type="text/css" th:href="@{{path}/common/webuploader/webuploader.css?v={v}(path=${staticPath},v=${v})}"/>
    <link rel="stylesheet" type="text/css" th:href="@{{path}/common/cropper/cropper.min.css?v={v}(path=${staticPath},v=${v})}"/>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInLeft">
        <div id="uploader" class="wu-example">
            <div class="queueList">
                <div id="dndArea" class="placeholder">
                    <div class="row m-t-lg text-center" th:attr="id=${btnId}">
                        选择文件
                    </div>
                    <!--<p id="description">或将照片拖到这里，单次最多可选300张</p>-->
                </div>
            </div>
        </div>
        <div class="row m-t-lg text-center hide" id="cut-handle-box">
            <div class="btn-group">
                <button class="btn btn-white" id="resetImg" type="button"><i class="fa fa-reply-all"></i> 重新选择图片</button>
                <button class="btn btn-white" id="dragMode" type="button"><i class="fa fa-arrows"></i> 拖动</button>
                <button class="btn btn-white" id="dragCrop" type="button"><i class="fa fa-crop"></i> 剪切</button>
                <button class="btn btn-white" id="zoomIn" type="button"><i class="fa fa-search-plus"></i> 放大</button>
                <button class="btn btn-white" id="zoomOut" type="button"><i class="fa fa-search-minus"></i> 缩小</button>
                <button class="btn btn-white" id="rotateLeft" type="button"><i class="fa fa-rotate-left"></i> 左旋转</button>
                <button class="btn btn-white" id="rotateRight" type="button"><i class="fa fa-rotate-right"></i> 右旋转</button>
                <button class="btn btn-white" id="Reset" type="button"><i class="fa fa-refresh"></i> 重置</button>
            </div>
        </div>
        <div class="row m-t-lg text-center hide" id="resetSelect">
            <span class="resetImg btn">重新选择图片</span>
        </div>
        <div class="row m-t-lg text-center hide" id="preview-box">
            <div class="hide" id="previewImg"></div>
            <div id="previewFile" class="fs18 c-999 hide"></div>
        </div>
    </div>
    <div data-th-replace="layout/head-footer"></div>
    <script type="text/javascript" th:src="@{{path}/common/webuploader/webuploader.min.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/common/cropper/cropper.min.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/upload/upload-file.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:inline="javascript" type="text/javascript">
        var btnId = [[${btnId}]];
        var params = JSON.parse([[${params}]]);
    </script>
</body>
</html>